<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css">
<script src="src/layuiadmin/js/jquery-1.8.2.js"></script>
<script src="layui/layui.js">
</script>
</head>
<body>


<form class="layui-form">
		<!-- 提示：如果你不想用form，你可以换成div等任何一个普通元素 -->
		<div class="layui-form-item">
			<label class="layui-form-label">员工名称</label>
			<div class="layui-input-block">
				<input type="text" name="name" placeholder="请输入" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		
		</div>
		

		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">员工简介</label>
			<div class="layui-input-block">
				<textarea placeholder="请输入内容" class="layui-textarea" name="jianjie"></textarea>
			</div>
		</div>

		
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">员工图片</label>
			<div class="layui-input-block">
				<button type="button" class="layui-btn" id="test">
					<i class="layui-icon">&#xe67c;</i>上传图片
				</button>
				<img   src=""  id="tupian"/>
			</div>
		</div>


		<div class="layui-form-item">
			<div class="layui-input-block">
				<button class="layui-btn" lay-submit lay-filter="*">立即提交</button>
				<button type="reset" class="layui-btn layui-btn-primary">重置</button>
			</div>
		</div>
		<!-- 更多表单结构排版请移步文档左侧【页面元素-表单】一项阅览 -->
	</form>
	<script>
		layui.use('upload', function() {
			var upload = layui.upload;

			//执行实例
			var uploadInst = upload.render({
				elem : '#test' //绑定元素
				,
				url : 'upload' //上传接口
				,
				done : function(res) {
					//上传完毕回调
					$("#tupian").attr("src",res.data).css("width","200px","height","200px");
				},
				error : function() {
					//请求异常回调
					alert("上传失败");
				}
			});
		});

		
		layui.use('laydate', function() {
			var laydate = layui.laydate;

			//执行一个laydate实例
			laydate.render({
				elem : '#test1' //指定元素
			});
		});

		layui.use('form', function() {
			var form = layui.form;

			$.ajax({
			    url:'yuangongchaxunservlet',
			    dataType:'json',
			    type:'get',
			    success:function(res){
			    	
			    	$.each(res.data,function(index,value){
			    		$('#selectID').append("<option value="+value.id+">"+value.name+"</option>");//往下拉菜单里添加元素
			    	})

					form.render();//菜单渲染 把内容加载进去
				}
			})
			
			//各种基于事件的操作，下面会有进一步介绍
			form.on('submit(*)', function(data) {
				console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
				console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
				console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
				//alert("hi");
				data.field.tupian = $("#tupian").attr("src");
				$.ajax({
					url : "yuangongaddservlet",//地址
					type : "get",//请求方式
					data : data.field//参数
					,
					success : function(res) {//成功以后的回调函数

						if (res == 1) {
							alert("添加成功");
						} else {
							alert("添加失败");
						}
					}

				});
				
				return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});

		});
	</script>









</body>
</html>